$ease: cubic-bezier(0.08, 0.01, 0.29, 0.99);

@supports (animation-timing-function: linear(0, 1)) {
  $ease: linear(
    0 0%,
    0.25 4.14%,
    0.53 13.29%,
    0.61 25.03%,
    0.75 34.8%,
    0.88 43.99%,
    0.93 58.77%,
    0.98 68.88%,
    0.99 79.22%,
    1 88.79%,
    1 100%
  );
}

// 进度条动画
@mixin progressAnimate($duration: 10s) {
  animation: progress $duration $ease forwards, progress 1s $ease forwards;
  animation-play-state: var(--running, running, paused);
  @at-root {
    @keyframes progress {
      99% {
        background-color: #9747ff;
      }

      100% {
        background-color: #14ae5c;
        width: 100%;
      }
    }
  }
}

.progress {
  position: relative;
  width: 300px;
  height: 10px;
  margin: 25px 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #e4ccff;
  &::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 100%;
    background-color: #9747ff;
    @include progressAnimate;
  }
}
